<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学成在线</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<!-- 头部区域开始 -->
		<div class="header w">
			<!-- logo部分 -->
			<div class="logo">
				<img src="images/logo.png">
			</div>
			<!-- 导航栏部分 -->
			<div class="nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">课程</a></li>
					<li><a href="#">职业规划</a></li>
				</ul>
			</div>
			<!-- 搜索部分 -->
			<div class="search">
				<input type="text" value="输入关键词" />
				<button></button>
			</div>
			<!-- 用户部分 -->
			<div class="user">
				<img src="images/user.png">
				qq-lilei
			</div>
		</div>
		<!-- 头部区域结束 -->
		<!-- banner开始 -->
		<div class="banner">
			<div class="w">
				<div class="subnav">
					<ul>
						<li><a href="#">前端开发 <span>&gt;</span></a></li>
						<li><a href="#">后端开发 <span>&gt;</span></a></li>
						<li><a href="#">移动开发 <span>&gt;</span></a></li>
						<li><a href="#">人工智能 <span>&gt;</span></a></li>
						<li><a href="#">商业预测 <span>&gt;</span></a></li>
						<li><a href="#">云计算&大数据 <span>&gt;</span></a></li>
						<li><a href="#">运维&从测试 <span>&gt;</span></a></li>
						<li><a href="#">UI设计 <span>&gt;</span></a></li>
						<li><a href="#">产品 <span>&gt;</span></a></li>
					</ul>
				</div>
				<div class="course">
					<h3>我的课程表</h3>
					<div class="bd">
						<ul>
							<li>
								<h4>继续学习 程序语言设计</h4>
								<p>正在学习-使用对象</p>
							</li>
							<li>
								<h4>继续学习 程序语言设计</h4>
								<p>正在学习-使用对象</p>
							</li>
							<li>
								<h4>继续学习 程序语言设计</h4>
								<p>正在学习-使用对象</p>
							</li>
						</ul>
						<a href="#">全部课程</a>
					</div>
				</div>
			</div>
		</div>
		<!-- banner结束 -->
		<!-- 精品推荐模块开始 -->
		<div class="goods w">
			<h3>精品推荐</h3>
			<ul>
				<li><a href="#">JQuery</a></li>
				<li><a href="#">Spark</a></li>
				<li><a href="#">MySQL</a></li>
				<li><a href="#">JavaWeb</a></li>
			</ul>
			<a href="#">修改兴趣</a>
		</div>
		<!-- 精品推荐模块结束 -->
		<!-- box核心内容区开始 -->
		<div class="box w">
			<div class="box-top">
				<h3>精品推荐</h3>
				<a href="#">查看全部</a>
			</div>
			<div class="box-botton">
				<ul>
					<li>
						<em>
							<img src="images/new.png">
						</em>
						<img src="images/精品1.png">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li>
						<em>
							<img src="images/hot.png">
						</em>
						<img src="images/精品2.png">
						<h4>Android 网络图片加载框架详解</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li><img src="images/精品3.png">
						<h4>Angular 2 最新框架+主流技术+项目实战</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li><img src="images/精品4.png">
						<h4>Android Hybrid APP开发实战 H5+原生</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li><img src="images/精品1.png">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li><img src="images/精品2.png">
						<h4>Android 网络图片加载框架详解</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li><img src="images/精品3.png">
						<h4>Angular 2 最新框架+主流技术+项目实战</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li><img src="images/精品4.png">
						<h4>Android Hybrid APP开发实战 H5+原生</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li><img src="images/精品1.png">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li><img src="images/精品2.png">
						<h4>Android 网络图片加载框架详解</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- box核心内容区结束 -->
		<!-- 编程入门部分开始 -->
		<div class="box1 w">
			<div class="box1-top">
				<h4>编程入门</h4>
				<ul>
					<li><a href="#" class="xianshi">热门</a></li>
					<li><a href="#">初级</a></li>
					<li><a href="#">中级</a></li>
					<li><a href="#">高级</a></li>
				</ul>
				<a href="#">查看全部</a>
			</div>
			<div class="box1-left">
				<img src="images/biancheng.png">
			</div>
			<div class="box1-right">
				<div class="box1-right-top">
					<img src="images/图层155.png" alt="">
				</div>
				<div class="box1-right-bottom">
					<ul>
						<li>
							<img src="images/数据1.png">
							<h4>Kami2首页界面切换效果</h4>
							<div class="info">
								<span>高级 • </span>1125人在学习
							</div>
						</li>
						<li>
							<img src="images/数据2.png">
							<h4>Android Hybrid APP开发实战 H5+原生！</h4>
							<div class="info">
								<span>高级 • </span>1125人在学习
							</div>
						</li>
						<li>
							<img src="images/数据3.png">
							<h4>Cocos2d-x 引擎源码中的纹理优化</h4>
							<div class="info">
								<span>高级 • </span>1125人在学习
							</div>
						</li>
						<li>
							<img src="images/数据4.png">
							<h4>Unity Profiler入门</h4>
							<div class="info">
								<span>高级 • </span>1125人在学习
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 编程入门部分结束 -->
		<!-- 数据分析是部分开始 -->
		<div class="box1 w">
			<div class="box1-top">
				<h4>数据分析师</h4>
				<ul>
					<li><a href="#" class="xianshi">热门</a></li>
					<li><a href="#">初级</a></li>
					<li><a href="#">中级</a></li>
					<li><a href="#">高级</a></li>
				</ul>
				<a href="#">查看全部</a>
			</div>
			<div class="box1-left">
				<img src="images/shujufenxi.png">
			</div>
			<div class="box1-right">
				<div class="box1-right-top">
					<img src="images/图层156.png" alt="">
				</div>
				<div class="box1-right-bottom">
					<ul>
						<li>
							<img src="images/数据2.png">
							<h4>Android Hybrid APP开发实战 H5+原生！</h4>
							<div class="info">
								<span>高级 • </span>1125人在学习
							</div>
						</li>
						<li>
							<img src="images/数据1.png">
							<h4>Kami2首页界面切换效果</h4>
							<div class="info">
								<span>高级 • </span>1125人在学习
							</div>
						</li>
						<li>
							<img src="images/数据4.png">
							<h4>Unity Profiler入门</h4>
							<div class="info">
								<span>高级 • </span>1125人在学习
							</div>
						</li>
						<li>
							<img src="images/数据3.png">
							<h4>Cocos2d-x 引擎源码中的纹理优化</h4>
							<div class="info">
								<span>高级 • </span>1125人在学习
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 数据分析是部分结束 -->
		<!-- 机器学习工程师部分开始 -->
		<div class="box2 w">
			<div class="box2-top">
				<h4>机器学习工程师</h4>
				<ul>
					<li><a href="#" class="xianshi">热门</a></li>
					<li><a href="#">初级</a></li>
					<li><a href="#">中级</a></li>
					<li><a href="#">高级</a></li>
				</ul>
				<a href="#">查看全部</a>
			</div>
			<div class="box2-bottom">
				<ul>
					<li>
						<img src="images/数据2.png">
						<h4>Android Hybrid APP开发实战 H5+原生！</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li>
						<img src="images/数据3.png">
						<h4>Cocos2d-x 引擎源码中的纹理优化</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li>
						<img src="images/数据4.png">
						<h4>Unity Profiler入门</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li>
						<img src="images/数据5.png">
						<h4>微软人工智能-数据分析平台</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li>
						<img src="images/数据1.png">
						<h4>Kami2首页界面切换效果</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 机器学习工程师部分结束 -->
		<!-- 前端开发工程师部分开始 -->
		<div class="box2 w">
			<div class="box2-top">
				<h4>前端开发工程师</h4>
				<ul>
					<li><a href="#" class="xianshi">热门</a></li>
					<li><a href="#">初级</a></li>
					<li><a href="#">中级</a></li>
					<li><a href="#">高级</a></li>
				</ul>
				<a href="#">查看全部</a>
			</div>
			<div class="box2-bottom">
				<ul>
					
					<li>
						<img src="images/数据5.png">
						<h4>微软人工智能-数据分析平台</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li>
						<img src="images/数据4.png">
						<h4>Unity Profiler入门</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li>
						<img src="images/数据3.png">
						<h4>Cocos2d-x 引擎源码中的纹理优化</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li>
						<img src="images/数据1.png">
						<h4>Kami2首页界面切换效果</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					<li>
						<img src="images/数据2.png">
						<h4>Android Hybrid APP开发实战 H5+原生！</h4>
						<div class="info">
							<span>高级 • </span>1125人在学习
						</div>
					</li>
					
				</ul>
			</div>
		</div>
		<!-- 前端开发工程师部分结束 -->
		<!-- footer开始 -->
		<div class="footer">
			<div class="w">
				<div class="copyright">
					<img src="images/logo.png">
					<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
						© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
					<a href="#">下载APP</a>
				</div>
				<div class="links">
					<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
					<dl>
						<dt>新手指南</dt>
						<dd><a href="#">如何注册</a></dd>
						<dd><a href="#">如何选课</a></dd>
						<dd><a href="#">如何拿到毕业证</a></dd>
						<dd><a href="#">学分是什么</a></dd>
						<dd><a href="#">考试为通过怎么办</a></dd>
					</dl>
					<dl>
						<dt>合作伙伴</dt>
						<dd><a href="#">合作机构</a></dd>
						<dd><a href="#">合作导师</a></dd>
					</dl>
				</div>
			</div>
		</div>
		<!-- footer结束 -->
	</body>
</html>
